<!--
组件市场
-->

<template>
  <div class="mc-market">
    <el-row>
      <el-col :span="24">
        <el-button size="mini" @click="installComponent">创建我的组件</el-button>
        <el-button size="mini" @click="deleteChooseComponents" type="danger">删除选中</el-button>
        <i class="el-icon-refresh" title="刷新本地组件" :style="{cursor: 'pointer',color:refreshColor}" @click="reimport"></i>
      </el-col>
      <el-col :span="24">
        <el-tabs v-model="tabName" @tab-click="clickTab">
          <el-tab-pane name="first" label="本地组件">
            <el-table :data="localComponents" :fit="true" :show-header="true">
              <el-table-column width="35px">
                <template slot-scope="scope">
                    <el-checkbox  v-model="scope.row.checked"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="title" label="标题"></el-table-column>
              <el-table-column label="名称">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.order>=0">{{scope.row.name}}</el-tag>
                  <span v-else>{{scope.row.name}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="version" label="版本"></el-table-column>
              <el-table-column label="生效">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.order>=0" disabled></el-switch>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="140px">
                <template slot-scope="scope">
                  <el-button-group>
                    <el-button size="mini" type="primary" @click="editComponent(scope.row)">编辑</el-button>
                    <el-dropdown size="mini" @command="moreAction($event,scope.row)">
                      <span class="el-dropdown-link">
                        <el-tag><i class="el-icon-arrow-down el-icon--right"></i></el-tag>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="delete">删除</el-dropdown-item>
                        <el-dropdown-item command="update" v-if="scope.row.marketUuid">更新</el-dropdown-item>
                        <el-dropdown-item command="toMarket">发到组件市场</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-button-group>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane name="second" label="组件市场">
            <el-table :data="marketComponents" :fit="true" :show-header="true">
              <el-table-column prop="title" label="标题"></el-table-column>
              <el-table-column prop="name" label="名称"></el-table-column>
              <el-table-column label="操作" fixed="right" width="140px">
                <template slot-scope="scope">
                  <el-button-group>
                    <el-button size="mini" type="primary" @click="viewComponent(scope.row)">详情</el-button>
                  </el-button-group>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination small layout="prev, pager, next" :total="totalCount" @current-change="pageChange" @prev-click="pageChange" @next-click="pageChange">
            </el-pagination>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

    <el-dialog :show-close="true"
               title="创建组件"
               :visible.sync="dialogVisible"
               width="70%">
      <el-form label-width="100px" v-model="componentForm">
        <el-form-item label="组件中文标题">
          <el-input v-model="componentForm.title"></el-input>
        </el-form-item>
        <el-form-item label="组件英文名称">
          <el-input v-model="componentForm.name"></el-input>
        </el-form-item>
        <el-form-item label="版本号">
          <el-input v-model="componentForm.version" placeholder="参考格式:0.0.1"></el-input>
        </el-form-item>
        <el-form-item label="属性配置JS">
          <el-input rows="5" v-model="componentForm.uiJs" placeholder="此js是组件在MagicalCoder布局器内的管理配置，例如您的自定义属性等" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="组件JS">
          <el-input rows="5" v-model="componentForm.iframeJs" placeholder="此js是组件通过vue打包后的js,发布页面时必须依赖此文件方可运行" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="组件样式">
          <el-input rows="5" v-model="componentForm.iframeCss" placeholder="样式文件" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="组件依赖">
          <el-input rows="5" v-model="componentForm.dependencies" placeholder='{"element":"2.0.6","jquery":"1.8"}' type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
           <el-button @click="closeDialog">取消</el-button>
           <el-button type="primary" @click="submitForm">确定</el-button>
       </span>
    </el-dialog>
    <el-dialog :show-close="true"
        title="组件介绍"
        :visible.sync="componentInfoVisible"
        width="70%">
        <el-card :header="componentInfo.title +':'+ componentInfo.name">
                <el-table :data="versionComponents" :fit="true" :show-header="true">
                              <el-table-column prop="version" label="版本"></el-table-column>
                              <el-table-column prop="dependencies" label="依赖"></el-table-column>
                              <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="primary" @click="downloadComponent(scope.row)">下载</el-button>
                                </template>
                              </el-table-column>
                            </el-table>
        </el-card>
    </el-dialog>
  </div>
</template>

<script>
import request from "../utils/request";
export default {
  name: 'mc-market',
  data () {
    return {
      dialogVisible:false,
      toMarketVisible:false,
      componentForm:{enable:true},
      localComponents:[],
      marketComponents:[],
      tabName:"first",
      marketForm:{price:0},
      renderMarketTables:false,
      totalCount:0,

      componentInfoVisible:false,
      componentInfo:{},
      //带版本号的组件
      versionComponents:[],
      refreshColor:'#7d7f84'
    }
  },
  props:['projectUuid'],
  watch:{

  },
  mounted () {
    this.refreshLocalList();
  },
  methods:{
    installComponent(){
      this.componentForm = {enable: true};
      this.dialogVisible = true;
    },
    closeDialog(){
      this.dialogVisible = false;
    },
    submitForm(){
      var _t = this;
      if(this.componentForm.dependencies){
          try{
            JSON.parse(this.componentForm.dependencies);
          }catch(e){
            _t.$message({type:"error",message:"组件依赖格式错误 必须是json如：{\"vue\":\"2.0\"}"});
            return;
          }
      }
      if(!this.componentForm.name){
        _t.$message({type:"error",message:"名称必填"});
        return;
      }
      if(!this.componentForm.version){
        _t.$message({type:"error",message:"版本必填"});
        return;
      }
      request.axios({$vue:this,url:"magical_lowcode/user/component/save?projectUuid="+this.projectUuid,method:"post",data:this.componentForm}).then(function (res){
        _t.$message({type:"success",message:"保存成功"});
        _t.dialogVisible = false;
        _t.refreshLocalList();
      })
    },
    editComponent(item){
      var _t = this;
      request.axios({$vue:this,url:"magical_lowcode/user/component/get",method:"get",params:{projectUuid:this.projectUuid,name:item.name,version:item.version}}).then(function (res){
        if(res.data!=null){
          _t.componentForm = res.data;
          _t.dialogVisible = true;
        }else {
          _t.$message("不存在")
        }
      })
    },
    deleteChooseComponents(){
      var list = [];
      for(var i=0;i<this.localComponents.length;i++){
          var com = this.localComponents[i];
          if(com.checked){
            list.push({name:com.name,version:com.version});
          }
      }
      var _t = this;
      if(list.length<=0){
        return;
      }
      request.axios({$vue:_t,url:"magical_lowcode/user/component/delete-list?projectUuid="+this.projectUuid,method:"post",
      data:{list:list}}).then(function (res){
        _t.$message({type:"success",message:"删除成功"})
        _t.refreshLocalList();
      })
    },
    deleteComponent(item){
      var _t = this;
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.axios({$vue:_t,url:"magical_lowcode/user/component/delete?projectUuid="+this.projectUuid,method:"post",data:{name:item.name,version:item.version}}).then(function (res){
          _t.$message({type:"success",message:"删除成功"})
          _t.refreshLocalList();
        })
      }).catch(() => {

      });
    },
    refreshLocalList(){
      var _t = this;
      request.axios({$vue:this,url:"magical_lowcode/user/component/list?projectUuid="+this.projectUuid,method:"get"}).then(function (res){
        var list = res.data;
        if(list){
            for(var i=0;i<list.length;i++){
                list[i].checked=false;
            }
        }
        _t.localComponents =list;
      })
    },
    moreAction(command,row){
      var uuid = row.uuid;
        switch (command){
          case 'delete':
            this.deleteComponent(row);
            break;
          case 'update':
            this.updateComponent(row.marketUuid);
            break
          case 'toMarket':
            this.toMarket(row);
            break;
        }
    },
    reimport(){
      this.refreshColor = '#409EFF'
      request.axios({$vue:this,url:"magical_lowcode/user/component/reimport",method:"get",
        params:{projectUuid:this.projectUuid}})
        .then(res =>{
          if(res.flag){
            this.refreshLocalList();
            this.refreshColor='#7d7f84';
            this.$message({type:"success",message:"刷新成功"})
          }
        })
    },
    //从市场更新组件
    downloadComponent(item){
      var _t = this;
      this.$confirm('此操作将从组件市场更新至最新，不可恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.axios({$vue:this,url:"magical_lowcode/user/component/download",method:"get",
            params:{projectUuid:this.projectUuid,name:item.name,version:item.version}})
        .then(function (res){
          _t.refreshLocalList();
          _t.$message({type:"success",message:"更新成功,刷新本页面即可生效"})
        })
      }).catch(() => {

      });
    },
    toMarket(item){
        var _t = this;
        this.$confirm('上传组件到组件市场，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          request.axios({$vue:this,url:"magical_lowcode/user/component/to-market?projectUuid="+this.projectUuid,method:"post",data:{name:item.name,version:item.version}}).then(function (res){
            _t.$message({type:"success",message:"发布成功，组件变更需管理员审核通过方可展示在组件市场，请耐心等待"})
          })
        }).catch(() => {});
    },

    clickTab(item){
        if(item.label=='组件市场' || item.label=='1'){
          if(!this.renderMarketTables){
            this.renderMarketTables = true;
            this.loadMarketComponents(1,10);
          }
        }else{
          this.refreshLocalList();
        }
    },
    pageChange(currentPage){
      this.loadMarketComponents(currentPage,10);
    },
    loadMarketComponents(currentPage,pageSize){
      var _t = this;
      var localMap = {};
      if(_t.localComponents){
          for(var i=0;i<_t.localComponents.length;i++){
              var component = _t.localComponents[i];
              if(component.name){
                  localMap[component.name] = true;
              }
          }
      }
      request.axios({$vue:this,url:("magical_lowcode/server/proxy-get?url=/u/user-component/page/"+currentPage+"/"+pageSize),method:"get",params:{}}).then(function (res){
        if(res.data!=null){
          _t.marketComponents = res.data;
          for(var i=0;i<_t.marketComponents.length;i++){
              var comp = _t.marketComponents[i];
              if(localMap[comp.name]){
                  comp.syncTag = 'update';
              }else{
                  comp.syncTag = 'download';
              }
          }
          _t.totalCount = res.count;
        }
      })
    },
    viewComponent(item){
        var _t = this;
        request.axios({$vue:this,url:("magical_lowcode/server/proxy-get?url=/u/user-component/list/"),method:"get",params:{name:item.name}}).then(function (res){
            if(res.data!=null){
              _t.versionComponents = res.data;
              _t.componentInfoVisible=true;
              _t.componentInfo = item;
            }
          })
    },
    buyComponent(uuid){
        this.$alert("联系管理员即可购买此组件QQ:799374340")
    }

  }
}
</script>

<style lang="scss">

</style>
